<template>
  <div class="loginPage">
    <el-form class="form animate__animated animate__fadeInUp">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="username"></el-input>
      </el-form-item>
      <el-form-item label="用户名" prop="password">
        <el-input v-model="password" type="password"></el-input>
      </el-form-item>
      <el-button @click="submit">登录</el-button>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { usePermissStore } from '@/store/permiss'

const $router = useRouter()
const permissStore = usePermissStore()

let username = ref('admin'),
  password = ref('123456')

const submit = () => {
  const role = username.value === 'admin' ? 'admin' : 'user'
  localStorage.setItem(
    'userInfo',
    JSON.stringify({
      username: username.value,
      time:
        new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate()
    })
  )
  localStorage.setItem(
    'permiss',
    JSON.stringify({
      permissRole: role
    })
  )
  permissStore.handleSet(role)
  $router.push('/')
}
</script>

<style lang="less" scoped>
.loginPage {
  width: 100%;
  height: 100%;
  background: url(@/assets/images/login.jpg) no-repeat;
  background-size: 100% 100%;
}
.form {
  width: 400px;
  height: 200px;
  padding: 20px;
  border-radius: 20px;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 200px);
  text-align: center;
  background: rgba(255, 255, 255, 0.5);
  :deep(.el-button) {
    width: 200px;
    margin-top: 50px;
  }
}
</style>
